<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BalanceCard from '@/views/dashboard/cards/BalanceCard.vue'

// 用户数据
const userData = ref({
  total: 0,
  active: 0,
  new: 0
})

onMounted(() => {
  // 模拟获取用户数据
  setTimeout(() => {
    userData.value = {
      total: 15842,
      active: 8756,
      new: 124
    }
  }, 500)
})
</script>

<template>
  <BalanceCard :amount="1234.56" />
</template>

<style scoped>
.user-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.card-header h3 {
  margin: 0;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 600;
}

.card-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--el-color-primary);
}
</style>